<script lang="ts" name="index2" setup>
import { Edit, View, Delete, Upload, Download } from '@element-plus/icons-vue'

const columns = reactive<API.ColumnsType[]>([
  {
    title: '科目名称',
    dataIndex: 'accountName',
    key: 'accountName',
    showInSearch: true,
    valueType: 'select',
    options: [
      {
        value: 'Option1',
        label: 'Option1'
      },
      {
        value: 'Option2',
        label: 'Option2'
      }
    ]
  },
  {
    title: '供应商档案',
    dataIndex: 'supplierFiles',
    key: 'supplierFiles',
    showInSearch: true
  },
  {
    title: '项目编号',
    dataIndex: 'projectNo',
    key: 'supplierFiles',
    showInSearch: true
  },
  {
    title: '项目名称',
    dataIndex: 'projectName',
    key: 'projectName',
    showInSearch: true
  },
  {
    title: '凭证号',
    dataIndex: 'voucherNo',
    key: 'voucherNo',
    showInSearch: true
  },
  {
    title: '金额',
    dataIndex: 'money',
    key: 'money',
    showInSearch: true
  },
  {
    title: '款项发生时间',
    dataIndex: 'payTime',
    key: 'payTime',
    showInSearch: true,
    isDaterange: false,
    valueType: 'date',
    format: 'YYYY-MM-DD'
  },
  {
    title: '账龄',
    dataIndex: 'aging',
    key: 'aging',
    showInSearch: true
  },
  {
    title: '账龄时间分段',
    dataIndex: 'agingTimeSegment',
    key: 'agingTimeSegment',
    showInSearch: true,
    isDaterange: true,
    valueType: 'daterange'
  },
  {
    title: '部门来源',
    dataIndex: 'deptSource',
    key: 'deptSource',
    showInSearch: true
  },
  {
    title: '单位来源',
    dataIndex: 'unitSource',
    key: 'unitSource',
    showInSearch: true
  },
  {
    title: '资金来源',
    dataIndex: 'fundSource',
    key: 'fundSource',
    showInSearch: true
  },
  {
    title: '单位地址',
    dataIndex: 'adress',
    key: 'adress',
    showInSearch: true
  },
  {
    title: '是否发函',
    dataIndex: 'doesSend',
    key: 'doesSend'
  },
  {
    title: '是否回函',
    dataIndex: 'doesReply',
    key: 'doesReply'
  },
  {
    title: '金额是否一致',
    dataIndex: 'doesUnanimous',
    key: 'doesUnanimous'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation'
  }
])

const searchForm = reactive<any>({})
columns
  .filter((item) => item.showInSearch)
  .forEach((col) => {
    searchForm[col.dataIndex] = col.initValue ? col.initValue : ''
  })

provide('searchForm', searchForm)

const currentPage = ref(4)
const pageSize = ref(20)

const handleQuery = () => {
  console.log(111)
}

const restSearchForm = () => {
  console.log(222)
}

const openDrawer = () => {
  console.log(333)
}

const handleDelete = () => {
  console.log(444)
}

const openSettings = () => {
  console.log(555)
}

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>

<template>
  <div class="table_card el-card">
    <Search
      :columns="columns"
      @handle-query="handleQuery"
      @reset-form="restSearchForm"
    />
    <el-divider />
    <TableHeader
      @open-drawer="openDrawer"
      @handle-delete="handleDelete"
      @handle-query="handleQuery"
      @open-settings="openSettings"
    >
      <template #customBtns>
        <el-button type="primary" :icon="Upload">导入</el-button>
        <el-button type="success" :icon="Download">导出</el-button>
      </template>
    </TableHeader>
    <el-table
      ref="tableRef"
      class="table_main"
      :data="data"
      style="width: 100%"
      height="600"
    >
      <el-table-column fixed prop="date" label="Date" width="150" />
      <el-table-column prop="name" label="Name" width="120" />
      <el-table-column prop="state" label="State" width="120" />
      <el-table-column prop="city" label="City" width="320" />
      <el-table-column prop="address" label="Address" width="600" />
      <el-table-column prop="zip" label="Zip" width="120" />
      <el-table-column fixed="right" label="Operations" width="200">
        <template #default>
          <el-button link type="primary" :icon="View" size="small"
            >查看</el-button
          >
          <el-button link type="primary" :icon="Edit" size="small"
            >编辑</el-button
          >
          <el-button link type="danger" :icon="Delete" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:currentPage="currentPage"
      v-model:page-size="pageSize"
      class="page_box flex jfe"
      :page-sizes="[10, 20, 30, 40]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style lang="less" scoped>
.table_card {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;

  .el-divider {
    margin: 20px 0;
  }

  .table_main {
    flex: 1;

    :deep(.el-table__inner-wrapper) {
      height: 100% !important;
    }
  }

  .page_box {
    width: 100%;
    margin-top: 20px;
    box-sizing: border-box;
  }
}

// .search_card {
//   width: 100%;
//   flex-shrink: 0;

//   :deep(.el-input__wrapper) {
//     width: calc(100% - 22px);
//   }

//   .rest_btn {
//     margin: 0 10px;
//   }

//   .expend_btn {
//     margin-left: 0;
//   }
// }
// .table_card {
//   width: 100%;
//   height: 100%;
//   background-color: #fff;
//   padding: 20px;
//   border-radius: 4px;
//   box-sizing: border-box;
//   // flex: 1;

//   :deep(.el-card__body) {
//     width: 100%;
//     height: 100%;
//     display: flex;
//     justify-content: space-between;
//     align-items: flex-end;
//     flex-direction: column;
//     box-sizing: border-box;
//   }

//   .table_header {
//     width: 100%;
//     margin: 20px 0;

//     .site_btns {
//       margin-left: 16px;
//     }
//   }

//   .el-table {
//     :deep(.el-table__header) {
//       width: 100% !important;
//     }

//     :deep(.el-table__body) {
//       width: 100% !important;
//     }
//   }

//   .page_box {
//     width: 100%;
//     margin-top: 20px;
//   }
// }
</style>
